<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Entry</title>
		<style>
			html {
				height: calc(100% - 90px);
				width: calc(100% - 15px);
			}
			body {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
			}
			
			.user {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: flex-end;
			}

			.user * {
				margin: 2px 5px;
			}

			.user button {
				border: none;
				color: white;
				padding: 5px 10px;
				background-color: #006d00;
			}

			.user button:hover {
				background-color: #005500;
			}

			.nav {
				display: flex;
				flex-direction: row;

				background-color: #009000;
			}

			.nav a {
				display: block;
				text-align: center;
				padding: 14px 16px;
				text-decoration: none;
				color: white;
				border: none;
				cursor: pointer;
				background-color: transparent;
			}

			.nav a:hover {
				background-color: #006D00;
			}

			.navContent {
				background-color: #ffff00;
				text-align: center;
				vertical-align: middle;
				width: auto;
				min-height: 100%;
			}
			.navContent iframe {
				width: 100%;
				height: 100%;
				border: 0px;
				margin: 0 auto;
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<div class="user">
			{% if user %}
			<span>Hello {{ user }}!</span>
			<button onclick="javascript:window.location.href = '/user/logout'">logout</button>
			{% else %}
			You didn't login.
			<button onclick="javascript:window.location.href = '/user/login'">login</button>
			{% endif %}
		</div>

		{% if user %}
		<div class="nav">
			<a onclick="onChangeSubContent('user/')">user</a>
			<a onclick="onChangeSubContent('duid/')">duid</a>
			<a onclick="onChangeSubContent('model/')">model</a>
			<a onclick="onChangeSubContent('firmware/')">firmware</a>
			<a onclick="onChangeSubContent('records/')">records</a>
		</div>
		<div class="navContent">
			<iframe id="subContent" scrolling="no" src="user/"></iframe>
		</div>
		{% endif %}
	</body>
	<script>
		onChangeSubContent = function(src) {
			subContentFrame = document.getElementById("subContent")
			subContentFrame.src = src
		}
	</script>
</html>
